<template>
  <div class="memorialHallList h100" v-loading="loading">
    <div class="pageContent">
      <el-row :gutter="11" class="fileSearch">
        <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="100px">
          <el-form-item label="纪念馆名:" prop="memorialName">
            <el-input v-model="ruleForm.memorialName" clearable></el-input>
          </el-form-item>
          <el-form-item label="纪念馆状态:" prop="state">
            <el-select v-model="ruleForm.state" placeholder="请选择纪念馆状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号:" prop="phone">
            <el-input v-model="ruleForm.phone" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit(1)">
              查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{
          background: 'rgb(246,247,251)',
          color: '#606266',
        }"
        stripe
        class="defaultTableHeight"
      >
        <el-table-column type="index" label="编号" width="50"> </el-table-column>
        <el-table-column prop="memorialName" align="center" label="纪念馆名称">
        </el-table-column>
        <el-table-column prop="nickname" align="center" label="用户昵称">
        </el-table-column>
        <el-table-column align="center" label="联系方式">
          <template slot-scope="scope">
            {{ scope.row.phone }}
            <el-button  v-if="scope.row.phone"  size="mini" @click="handleCopy(scope.$index, scope.row)">
              复制
            </el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="纪念馆状态" align="center" width="100px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state == 1" type="primary" size="mini"
              >审核中</el-button
            >
            <el-button v-if="scope.row.state == 2" type="success" size="mini"
              >已通过</el-button
            >
          </template>
        </el-table-column> -->
        <el-table-column
          prop="memorialType"
          align="center"
          label="纪念馆类型"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.memorialType == 1">单人</span>
            <span v-if="scope.row.memorialType == 2">双人</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" width="170">
          <template slot-scope="scope">
            {{ scope.row.gmtCreate | timestampToTime }}
          </template>
        </el-table-column>
        <el-table-column prop="epitaph" align="center" label="墓志铭"> </el-table-column>
        <el-table-column prop="biography" align="center" label="生平简介">
        </el-table-column>
        <el-table-column align="center" label="图片(点击预览更多)" width="100">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.imgs"
              :src="scope.row.imgs[0] ? scope.row.imgs[0] : ''"
              alt=""
              :preview-src-list="scope.row.imgs"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否公开" width="90">
          <template slot-scope="scope">
            {{ scope.row.asPublic == 1 ? "公开" : "不公开" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px">
          <template slot-scope="scope">
            <!-- {{ scope.row.state }}{{ scope.row.state === 0 ? "禁用" : "启用" }} -->
            <el-button
              :type="scope.row.state == 0 ? 'danger' : 'primary'"
              size="mini"
              @click="changeState(scope.row.id, scope.row.state)"
              >{{ scope.row.state == 0 ? "禁用" : "启用" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.currentPage"
          :page-size="pager.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          background
          layout="total,sizes,prev, pager, next, jumper"
          :total="pager.total"
        >
        </el-pagination>
      </p>
    </div>
  </div>
</template>

<script>
import { getMemorialHallList, memorialHallAction } from "@/api/appUser/memorialHall";

export default {
  name: "memorialHallList",
  data() {
    return {
      loading: false,
      ruleForm: {
        memorialName: "",
        state: "",
        phone: "",
      },
      pager: {
        pageSize: 20,
        total: 1,
        currentPage: 1,
      },
      tableData: [],
    };
  },
  mounted() {
    this.onSubmit();
  },
  //注销window.onresize事件
  destroyed() {},
  methods: {
    async onSubmit(val) {
      if (val) {
        this.pager.currentPage = 1;
      }
      this.loading = true;
      let postData = {
        memorialName: this.ruleForm.memorialName,
        phone: this.ruleForm.phone,
        state: this.ruleForm.state,
        pageSize: this.pager.pageSize,
        currentPage: this.pager.currentPage,
      };
      console.log(postData, "postData");
      try {
        //查询接口
        let res = await getMemorialHallList(postData);
        console.log(res, 200);
        this.loading = false;
        if (res.code !== "2000") {
          this.$message.error(res.msg ? res.msg : "数据读取失败");
          return;
        }
        this.tableData = res.data;
        this.pager.pageSize = res.pageSize;
        this.pager.total = res.total;
        this.pager.currentPage = res.currentPage;
      } catch (err) {
        this.loading = false;
        console.log(err);
        this.$message(err);
      }
    },

    // 启用禁用
    async changeState(id, state) {
      let num = state == 0 ? 1 : 0;
      let postData = {
        id,
        state: num,
      };
      console.log(postData, "参数");
      try {
        const res = await memorialHallAction(postData);
        console.log(res, 200);
        if (res.code !== "2000") {
          this.$message.error(res.msg ? res.msg : "操作失败");
          return;
        }
        this.$message.success("操作成功");
        this.onSubmit();
      } catch (err) {
        this.$message.error(err.msg);
        console.log(err, 404);
      }
    },
    // 点击复制
    handleCopy(index, row) {
      var input = document.createElement("input"); // js创建一个input输入框
      input.value = row.phone; // 将需要复制的文本赋值到创建的input输入框中，this.ruleForm.url这个是我要复制的内容
      console.log(input.value);
      document.body.appendChild(input); // 将输入框暂时创建到实例里面
      input.select(); // 选中输入框中的内容
      document.execCommand("Copy"); // 执行复制操作
      document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs["ruleForm"].resetFields();
      this.onSubmit();
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pager.pageSize = size;
      this.onSubmit();
    },
    handleCurrentChange: function (currentPage) {
      this.pager.currentPage = currentPage;
      this.onSubmit(); //点击第几页
    },
  },
};
</script>

<style lang="scss" scoped>
.el-image {
  width: 70px;
  height: 70px;
}
</style>
